<!DOCTYPE html>
<html>
<head>
    {{template "header"}}
</head>
<body>
<script>
    webix.ready(function () {
        let frameid = webix.uid().toString()
        let doItemAction = function (id) {
            let menuitem = $$("main-sidebar").getItem(id);
            if (menuitem.url) {
                $$(frameid).load(menuitem.url);
            }
        }
        webix.ui({
            rows: [
                {
                    borderless: true,
                    cols: [
                        {
                            rows: [
                                {
                                    rows: [
                                        {
                                            view: "template", css: "nav-logo", template: "<a class='load-dash'" +
                                                " href='/'><img src='/static/images/nav-logo.png' width='195'" +
                                                " height='38'/></a>", height: 45
                                        },
                                        {
                                            id: "main-sidebar",
                                            view: "sidebar",
                                            scroll: "auto",
                                            width: 220,
                                            url: "/admin/menu.json",
                                            on: {
                                                onAfterSelect: doItemAction,
                                                onItemClick: doItemAction,
                                            }
                                        },
                                    ]
                                }
                            ]
                        },
                        {
                            rows: [
                                {
                                    view: "toolbar",
                                    id: "main-toolbar",
                                    padding: 3,
                                    height: 45,
                                    css: "page-nav",
                                    elements: [
                                        {
                                            cols: [
                                                {
                                                    view: "button",
                                                    css: "webix_transparent",
                                                    type: "icon",
                                                    icon: "wxi-drag",
                                                    width: 36,
                                                    align: "left",
                                                    click: function () {
                                                        $$("main-sidebar").toggle()
                                                    }
                                                },
                                                {
                                                    css: "nav-title-bar",
                                                    rows: [
                                                        {
                                                            view: "label",
                                                            height: 36,
                                                            borderless: true,
                                                            label: "Build:{{buildver}}",
                                                            css: "nav-s-title"
                                                        },
                                                    ]
                                                },
                                                {width: 50}, {},
                                                {
                                                    view: "button",
                                                    css: "nav-item webix_transparent",
                                                    type: "icon",
                                                    icon: "mdi mdi-link",
                                                    height: 25,
                                                    width: 80,
                                                    borderless: true,
                                                    label: "API",
                                                    click: function () {
                                                        $$(frameid).load("/swagger/index.html");
                                                    }
                                                },
                                                {
                                                    view: "button",
                                                    css: "nav-item webix_transparent",
                                                    type: "icon",
                                                    icon: "mdi mdi-text-search",
                                                    height: 25,
                                                    width: 45,
                                                    borderless: true,
                                                    label: "",
                                                    click: function () {
                                                        $$(frameid).load("/admin/loki");
                                                    }
                                                },
                                                {
                                                    view: "button",
                                                    css: "nav-item webix_transparent",
                                                    type: "icon",
                                                    icon: "mdi mdi-cogs",
                                                    height: 25,
                                                    width: 45,
                                                    borderless: true,
                                                    label: "",
                                                    click: function () {
                                                        $$(frameid).load("/admin/settings");
                                                    }
                                                },
                                                {
                                                    view: "switch", onLabel: "中文", offLabel: "English", value: "{{zhlang}}", width: 100,
                                                    on: {
                                                        onChange: function (newValue, oldValue, config) {
                                                            webix.delay(function () {
                                                                webix.ajax().get("/admin/translate/switch/" + newValue).then(function (resp) {
                                                                    window.location.reload()
                                                                })
                                                            })
                                                        }
                                                    }
                                                },
                                                {
                                                    view: "switch", width: 70, borderless: true, type: "icon", value: "{{moontheme}}",
                                                    onLabel: "<i class='mdi mdi-weather-night'></i>",
                                                    offLabel: "<i class='mdi mdi-weather-sunny'></i>",
                                                    on: {
                                                        onChange: function (newValue, oldValue, config) {
                                                            webix.delay(function () {
                                                                webix.ajax().get("/admin/theme/switch/" + newValue).then(function (resp) {
                                                                    window.location.reload()
                                                                })
                                                            })
                                                        }
                                                    }
                                                },
                                                {
                                                    view: "button",
                                                    css: "nav-item webix_transparent",
                                                    type: "icon",
                                                    icon: "mdi mdi-account",
                                                    height: 25,
                                                    width: 35,
                                                    borderless: true,
                                                    click: function () {
                                                        OprPanelUI.accountSidebar()
                                                    }
                                                },
                                            ]
                                        }
                                    ]
                                },
                                {css: "iframe-page", view: "iframe", id: frameid, src: "/admin/overview"},
                            ]
                        },
                    ]
                }
            ]
        });
    })
</script>
</body>
</html>